<template>
  <div class="inventory">
    <div class="page-header">
      <h2>库存管理</h2>
      <button class="btn" @click="showAddInventory = true">添加库存记录</button>
    </div>

    <div class="card">
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>SKU</th>
            <th>当前库存</th>
            <th>最低库存</th>
            <th>库存状态</th>
            <th>最后更新</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in inventory" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.productName }}</td>
            <td>{{ item.sku }}</td>
            <td>
              <span :class="['stock-level', getStockLevelClass(item.currentStock, item.minStock)]">
                {{ item.currentStock }}
              </span>
            </td>
            <td>{{ item.minStock }}</td>
            <td>
              <span :class="['status', getStockStatus(item.currentStock, item.minStock)]">
                {{ getStockStatusText(item.currentStock, item.minStock) }}
              </span>
            </td>
            <td>{{ item.lastUpdated }}</td>
            <td>
              <button class="btn" @click="editInventory(item)">编辑</button>
              <button class="btn" @click="adjustStock(item)">调整库存</button>
              <button class="btn btn-danger" @click="deleteInventory(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑库存弹窗 -->
    <div v-if="showAddInventory || editingInventory" class="modal-overlay" @click="closeModal">
      <div class="modal" @click.stop>
        <h3>{{ editingInventory ? '编辑库存' : '添加库存记录' }}</h3>
        <form @submit.prevent="saveInventory">
          <div class="form-group">
            <label>商品名称</label>
            <select class="form-control" v-model="inventoryForm.productName" required>
              <option value="">请选择商品</option>
              <option value="iPhone 15 Pro">iPhone 15 Pro</option>
              <option value="MacBook Air M2">MacBook Air M2</option>
              <option value="Nike运动鞋">Nike运动鞋</option>
            </select>
          </div>
          <div class="form-group">
            <label>SKU</label>
            <input 
              type="text" 
              class="form-control" 
              v-model="inventoryForm.sku" 
              required
            />
          </div>
          <div class="form-group">
            <label>当前库存</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="inventoryForm.currentStock" 
              min="0"
              required
            />
          </div>
          <div class="form-group">
            <label>最低库存</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="inventoryForm.minStock" 
              min="0"
              required
            />
          </div>
          <div class="form-group">
            <label>仓库位置</label>
            <input 
              type="text" 
              class="form-control" 
              v-model="inventoryForm.location"
            />
          </div>
          <div class="form-group">
            <label>备注</label>
            <textarea 
              class="form-control" 
              v-model="inventoryForm.notes"
              rows="3"
            ></textarea>
          </div>
          <div class="form-actions">
            <button type="button" class="btn" @click="closeModal">取消</button>
            <button type="submit" class="btn">保存</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 调整库存弹窗 -->
    <div v-if="showAdjustStock" class="modal-overlay" @click="closeAdjustModal">
      <div class="modal" @click.stop>
        <h3>调整库存 - {{ adjustingItem?.productName }}</h3>
        <form @submit.prevent="saveStockAdjustment">
          <div class="form-group">
            <label>调整类型</label>
            <select class="form-control" v-model="stockAdjustment.type" required>
              <option value="in">入库</option>
              <option value="out">出库</option>
            </select>
          </div>
          <div class="form-group">
            <label>调整数量</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="stockAdjustment.quantity" 
              min="1"
              required
            />
          </div>
          <div class="form-group">
            <label>调整原因</label>
            <select class="form-control" v-model="stockAdjustment.reason">
              <option value="purchase">采购入库</option>
              <option value="sale">销售出库</option>
              <option value="return">退货入库</option>
              <option value="damage">损坏出库</option>
              <option value="adjustment">库存调整</option>
            </select>
          </div>
          <div class="form-group">
            <label>备注</label>
            <textarea 
              class="form-control" 
              v-model="stockAdjustment.notes"
              rows="3"
            ></textarea>
          </div>
          <div class="form-actions">
            <button type="button" class="btn" @click="closeAdjustModal">取消</button>
            <button type="submit" class="btn">确认调整</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Inventory',
  data() {
    return {
      inventory: [
        {
          id: 1,
          productName: 'iPhone 15 Pro',
          sku: 'IP15P-128-BLK',
          currentStock: 50,
          minStock: 10,
          location: 'A区-01-01',
          notes: '热销商品，需要及时补货',
          lastUpdated: '2023-10-15'
        },
        {
          id: 2,
          productName: 'MacBook Air M2',
          sku: 'MBA-M2-256-SLV',
          currentStock: 30,
          minStock: 5,
          location: 'A区-02-01',
          notes: '高端商品，库存充足',
          lastUpdated: '2023-10-14'
        },
        {
          id: 3,
          productName: 'Nike运动鞋',
          sku: 'NIKE-AF1-WHT-42',
          currentStock: 100,
          minStock: 20,
          location: 'B区-01-01',
          notes: '常规商品，库存充足',
          lastUpdated: '2023-10-13'
        }
      ],
      showAddInventory: false,
      editingInventory: null,
      showAdjustStock: false,
      adjustingItem: null,
      inventoryForm: {
        productName: '',
        sku: '',
        currentStock: '',
        minStock: '',
        location: '',
        notes: ''
      },
      stockAdjustment: {
        type: 'in',
        quantity: '',
        reason: 'adjustment',
        notes: ''
      }
    }
  },
  methods: {
    getStockLevelClass(current, min) {
      if (current <= min) return 'low'
      if (current <= min * 2) return 'medium'
      return 'high'
    },
    getStockStatus(current, min) {
      if (current <= min) return 'low'
      if (current <= min * 2) return 'medium'
      return 'normal'
    },
    getStockStatusText(current, min) {
      if (current <= min) return '库存不足'
      if (current <= min * 2) return '库存偏低'
      return '库存充足'
    },
    editInventory(item) {
      this.editingInventory = item
      this.inventoryForm = { ...item }
    },
    adjustStock(item) {
      this.adjustingItem = item
      this.showAdjustStock = true
    },
    deleteInventory(id) {
      if (confirm('确定要删除这个库存记录吗？')) {
        this.inventory = this.inventory.filter(item => item.id !== id)
      }
    },
    saveInventory() {
      if (this.editingInventory) {
        // 编辑库存
        const index = this.inventory.findIndex(i => i.id === this.editingInventory.id)
        this.inventory[index] = { 
          ...this.editingInventory, 
          ...this.inventoryForm,
          lastUpdated: new Date().toISOString().split('T')[0]
        }
      } else {
        // 添加库存
        const newInventory = {
          id: this.inventory.length + 1,
          ...this.inventoryForm,
          lastUpdated: new Date().toISOString().split('T')[0]
        }
        this.inventory.push(newInventory)
      }
      this.closeModal()
    },
    saveStockAdjustment() {
      const item = this.adjustingItem
      const quantity = parseInt(this.stockAdjustment.quantity)
      
      if (this.stockAdjustment.type === 'out' && item.currentStock < quantity) {
        alert('库存不足，无法出库！')
        return
      }
      
      // 更新库存
      const index = this.inventory.findIndex(i => i.id === item.id)
      if (this.stockAdjustment.type === 'in') {
        this.inventory[index].currentStock += quantity
      } else {
        this.inventory[index].currentStock -= quantity
      }
      this.inventory[index].lastUpdated = new Date().toISOString().split('T')[0]
      
      this.closeAdjustModal()
    },
    closeModal() {
      this.showAddInventory = false
      this.editingInventory = null
      this.inventoryForm = {
        productName: '',
        sku: '',
        currentStock: '',
        minStock: '',
        location: '',
        notes: ''
      }
    },
    closeAdjustModal() {
      this.showAdjustStock = false
      this.adjustingItem = null
      this.stockAdjustment = {
        type: 'in',
        quantity: '',
        reason: 'adjustment',
        notes: ''
      }
    }
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
}

.stock-level {
  font-weight: bold;
}

.stock-level.low {
  color: #e74c3c;
}

.stock-level.medium {
  color: #f39c12;
}

.stock-level.high {
  color: #27ae60;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status.low {
  background: #f8d7da;
  color: #721c24;
}

.status.medium {
  background: #fff3cd;
  color: #856404;
}

.status.normal {
  background: #d4edda;
  color: #155724;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  margin-bottom: 20px;
  color: #2c3e50;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
</style> 